<template>
  <div class="emotion-home">
    <div class="main">
      <div class="banner">
        <img class="banner-img" src="../assets/images/tit_bg.webp" alt="情感测试封面" />
        <div class="banner-mask"></div>
        <div class="banner-title">
          <h2>What's Your<br />Hidden<br />Attribute in<br />Relationships?</h2>
        </div>
        <div class="btn-box">
          <button class="start-btn" @click="startTest">👉 Start Test Now</button>
          <!-- <button class="clear-data-btn" @click="clearTestData">🔄 Clear Cache & Start Fresh</button> -->
        </div>
      </div>
      <div class="desc-box">
        <p class="desc">
          "Try to discover your potential<br />emotional <i style="color: #a182f2">relationship patterns</i><br />
          through 5 sets of easy questions."<br />"Whether you're a Healing Angel,<br />
          Clingy Cat, Rational Iceberg, or Sweet<br />
          Honey, you'll find your answer here."
        </p>
      </div>
    </div>
    <div class="content">
      <div class="relationship-desc">
        <div>
          🌿Everyone may face relationship<br />
          challenges. Understanding yourself is the<br />
          first step toward a healthy relationship.
        </div>
        <div style="color: #a182f2">
          💞"The Must-Do Relationship Test of 2025" — Quickly understand your hidden patterns in intimate relationships based on classic<br />
          psychological theories
        </div>
        <div>
          💞Over 100,000 people have already taken<br />
          this test and discovered their true emotional<br />
          patterns — "Are you ready to see what your hidden attribute is?"
        </div>
        <div class="tip4" style="color: #a182f2">💭"You're not the only one feeling lost in intimate relationships. In fact, each of us may unconsciously develop certain emotional hidden attributes. What's important is becoming aware of them and making changes."</div>
      </div>
      <!-- <div class="fact">
        <img src="@/assets/images/fact_bg.webp" alt="" />
      </div> -->

      <!-- FAQ Section -->
      <div class="faq-section">
        <h2 class="faq-title">Why is this test worth taking seriously?</h2>
        <div class="faq-list">
          <div v-for="(item, idx) in faqList" :key="idx" class="faq-item">
            <div class="faq-question" :class="{ open: openIndex === idx }" @click="toggleFaq(idx)">
              <span>{{ item.q }}</span>
              <span class="faq-icon">{{ openIndex === idx ? '－' : '＋' }}</span>
            </div>
            <transition name="smooth-faq">
              <div v-if="openIndex === idx" class="faq-answer">
                <span v-html="item.a"></span>
              </div>
            </transition>
            <div class="faq-divider" v-if="idx < faqList.length - 1"></div>
          </div>
        </div>
      </div>

      <!-- Testimonials Carousel Section -->
      <div class="testimonials-section">
        <h2 class="testimonials-title">See what users have to say about us</h2>
        <p class="testimonials-subtitle">
          QMT Emotional Dependency Mode Test has helped <br />
          over 1w+ users discover their true emotional <br />
          dependency patterns
        </p>

        <div class="carousel-container" @mouseenter="pauseAutoSlide" @mouseleave="resumeAutoSlide">
          <div class="carousel-wrapper" :style="{ transform: `translateX(-${currentSlide * 100}%)` }" @transitionend="onTransitionEnd">
            <!-- 展示所有轮播项，最后添加第一项的克隆 -->
            <div v-for="(testimonial, index) in displayTestimonials" :key="index === displayTestimonials.length - 1 ? 'clone' : index" class="testimonial-item">
              <div class="testimonial-content">
                <p class="testimonial-text">{{ testimonial.text }}</p>
                <div class="testimonial-user">
                  <div class="testimonial-avatar">
                    <img :src="testimonial.avatar | imgPath" alt="User avatar" />
                  </div>
                  <div class="testimonial-user-info">
                    <div class="testimonial-name">{{ testimonial.name }}</div>
                    <div class="testimonial-role">{{ testimonial.role }}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="carousel-dots">
            <span v-for="(dot, index) in testimonials.length" :key="index" class="dot" :class="{ active: getRealIndex(currentSlide) === index }" @click="setSlide(index)"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'EmotionHome',
  data() {
    return {
      autoSlideTimer: null, // 存储定时器的变量
      openIndex: 0, // Default open is the third item
      currentSlide: 0, // Current slide index
      isTransitioning: false, // 是否正在过渡中
      testimonials: [
        {
          text: 'I decided to buy it! The instant response to my personalized needs was very surprising, and it exceeded my expectations for the same application!',
          name: 'Cute Little Cat',
          role: 'Veteran Player User',
          avatar: 'https://randomuser.me/api/portraits/women/44.jpg',
        },
        {
          text: 'This test really helped me understand why I act the way I do in relationships. Highly recommended!',
          name: 'John Smith',
          role: 'New User',
          avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        },
        {
          text: 'The insights were so accurate I felt like someone had been watching my relationships for years!',
          name: 'Sarah Wilson',
          role: 'Premium Member',
          avatar: 'https://randomuser.me/api/portraits/women/68.jpg',
        },
        {
          text: 'Finally understood my attachment style and why I keep making the same relationship mistakes.',
          name: 'Mike Johnson',
          role: 'Regular User',
          avatar: 'https://randomuser.me/api/portraits/men/75.jpg',
        },
      ],
      faqList: [
        {
          q: 'Why is this test worth taking?',
          a: 'patterns often directly affect your sense of happiness and the quality of your intimate relationships',
        },
        {
          q: 'Is this a scam? Just to trick me into paying?',
          a: 'patterns often directly affect your sense of happiness and the quality of your intimate relationships',
        },
        {
          q: 'What will I get after the test is completed?',
          a: "Because it's based on the classic psychological <span style='color: #7b5cff;'>[Attachment Theory]</span>, which can help you quickly understand your hidden patterns in intimate relationships.<br><br>These patterns often directly affect your sense of happiness and the quality of your intimate relationships.",
        },
        {
          q: 'What will I get after the test is completed?',
          a: 'patterns often directly affect your sense of happiness and the quality of your intimate relationships',
        },
        {
          q: 'If I find myself to be anxious/avoidant, is there no hope?',
          a: 'patterns often directly affect your sense of happiness and the quality of your intimate relationships',
        },
      ],
    }
  },
  computed: {
    // 添加复制的第一个元素到末尾，用于无缝循环
    displayTestimonials() {
      return [...this.testimonials, this.testimonials[0]]
    },
  },
  created() {
    // 每次打开Home页面时重新生成uid
    this.generateNewUid()
    this.test()
    // console.log('ta', ta)

    // 上报用户使用的PC, iOS, Android
    ta.track('platform', { platform: this.env.isBrowser ? 'PC' : this.env.isIOS ? 'iOS' : 'Android' })
    // 上报用户使用的浏览器
    ta.track('browser', { browser: navigator.userAgent })

    ta.track('test_intro_show', { TestID: 'Test_1' })
  },
  methods: {
    test() {
      this.faqList.forEach((item) => {
        let task = {
          msgId: item.q,
          text: item.a,
          cb(result) {
            item.children[0].innerText = result
          },
        }
        // console.log('task', task)
      })
    },

    // 生成新的uid并保存
    generateNewUid() {
      // 清除所有缓存数据
      this.$store.commit('clearAllData')

      // 总是生成新的uid，不管是否已存在
      let time = new Date().getTime()
      let randomNum = Math.floor(Math.random() * 1000000)
        .toString()
        .padStart(6, '0')
      let uid = time + randomNum

      // 保存到Vuex和localStorage
      // this.$store.commit('setUid', uid)
      localStorage.setItem('uid', uid)

      // console.log('uid:', uid)
    },

    startTest() {
      // 导航到测试页面，
      this.$router.push({
        path: '/test',
        query: {
          uid: localStorage.getItem('uid'),
        },
      })
      ta.track('test_intro_click_start', { TestID: 'Test_1' })
      // 如果已经做了选择情况下 直接跳转到test页面 接着开始做题
      // if (this.$store.state.currentStage > 1) {
      //   this.$router.push('/test')
      // }
    },
    toggleFaq(idx) {
      this.openIndex = this.openIndex === idx ? -1 : idx
    },
    setSlide(index) {
      this.currentSlide = index
      // 重置自动轮播计时器
      this.resetAutoSlideTimer()
    },
    nextSlide() {
      if (this.isTransitioning) return
      this.isTransitioning = true
      this.currentSlide++
      // 如果是最后一个（克隆的第一个），过渡结束后会瞬间跳回第一个
    },
    // 过渡结束后的处理
    onTransitionEnd() {
      this.isTransitioning = false
      // 如果滑动到克隆的第一个，立即无动画跳回真正的第一个
      if (this.currentSlide >= this.testimonials.length) {
        setTimeout(() => {
          const wrapper = document.querySelector('.carousel-wrapper')
          if (wrapper) {
            wrapper.style.transition = 'none'
            this.currentSlide = 0
            // 强制重排后恢复过渡效果
            setTimeout(() => {
              wrapper.style.transition = 'transform 0.5s ease-in-out'
            }, 50)
          }
        }, 0)
      }
    },
    // 获取实际索引（用于指示点）
    getRealIndex(slideIndex) {
      return slideIndex % this.testimonials.length
    },

    // 鼠标悬停时暂停自动轮播
    pauseAutoSlide() {
      if (this.autoSlideTimer) {
        clearInterval(this.autoSlideTimer)
        this.autoSlideTimer = null
      }
    },

    // 鼠标离开时恢复自动轮播
    resumeAutoSlide() {
      if (!this.autoSlideTimer) {
        this.resetAutoSlideTimer()
      }
    },

    resetAutoSlideTimer() {
      if (this.autoSlideTimer) {
        clearInterval(this.autoSlideTimer)
      }
      this.autoSlideTimer = setInterval(this.nextSlide, 4000) // 每4秒轮播一次
    },

    startAnimation(el) {
      el.style.height = 'auto'
      const height = el.scrollHeight
      el.style.height = '0px'
      // 强制重排
      el.offsetHeight
      el.style.height = height + 'px'
    },
  },
  mounted() {
    // 启动自动轮播
    this.resetAutoSlideTimer()
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    if (this.autoSlideTimer) {
      clearInterval(this.autoSlideTimer)
    }
  },
}
</script>

<style scoped lang="scss">
.emotion-home {
  margin: 0 auto;
  background: #fff;
}

.banner {
  position: relative;
  width: 100%;
  height: calc(100vh - 50px - 162px - 25px);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.banner-mask {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 60%, rgba(0, 0, 0, 0.7) 100%);
}

.banner-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  z-index: 2;
}

.banner-title h2 {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-family: NotoSans-ExtraBold;
}

.desc-box {
  background: #fff;
  width: 100%;
  // padding: 16px 0px;
  padding: 32px 0px 42px;
  box-sizing: border-box;
}

.desc {
  color: #111;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  text-align: center;
  letter-spacing: normal;
  font-family: NotoSerif-Medium;
}

.desc-link {
  color: #7b5cff;
  // cursor: pointer;
  text-decoration: underline;
  font-size: 0.98rem;
}

.btn-box {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  max-width: 400px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.start-btn {
  width: 100%;
  height: 50px;
  background: #7b5cff;
  color: #fff;
  font-size: 1.2rem;
  border: none;
  border-radius: 30px;
  padding: 0 0;
  box-shadow: 0 2px 8px rgba(123, 92, 255, 0.12);
  transition: background 0.2s;
  font-family: NotoSans-SemiBold;
}

// .start-btn:hover {
//   background: #5a3fd6;
// }

.content {
  .relationship-desc {
    padding: 16px;
    background-color: #faf2ff;
    color: #111;
    font-size: 16px;
    > div {
      margin-bottom: 16px;
    }
    > div:last-child {
      margin-bottom: 0;
    }
  }
  .tip4 {
    color: #111;
    // font-family: NotoSerif-MediumItalic;
    // text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.7);
  }
  .fact {
    // background: url('../assets/images/fact_bg.webp') no-repeat;
    // background-size: 100% cover;
    > img {
      width: 100%;
      height: auto;
    }
  }
}

.faq-section {
  background: #f8f2ff;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faq-title {
  width: 70%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  margin-bottom: 12px;
  text-align: center;
  font-family: NotoSans-ExtraBold;
}

.faq-list {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.faq-item {
  width: 100%;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
  color: #111;
  padding: 16px 22px;
  // cursor: pointer;
  // user-select: none;
  //transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: left;
  font-family: NotoSans-SemiBold;
}

.faq-question.open {
  // background: #fff;
}

.faq-icon {
  font-size: 1.3rem;
  font-weight: normal;
  color: #111;
  display: block;
  width: 24px;
  text-align: center;
  font-family: NotoSans-SemiBold;
}

.faq-answer {
  color: #999;
  font-size: 14px;
  padding: 0 22px 16px 22px;
  line-height: 1.6;
  overflow: hidden;
  text-align: left;
}

.faq-divider {
  height: 1px;
  background: #eee;
}

/* 平滑过渡动画 */
.smooth-faq-enter-active,
.smooth-faq-leave-active {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 300px;
  opacity: 1;
  overflow: hidden;
}

.smooth-faq-enter,
.smooth-faq-leave-to {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
}

/* Testimonials Carousel Styles */
.testimonials-section {
  background: #f8f2ff;
  padding: 0px 0px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials-title {
  width: 70%;
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  margin-bottom: 3px;
  font-family: NotoSans-ExtraBold;
}

.testimonials-subtitle {
  font-size: 0.8rem;
  color: #999;
  line-height: 1.4;
  margin-bottom: 12px;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.carousel-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial-item {
  min-width: 100%;
  // margin: 0 5px;
  padding: 0 16px;
}

// .testimonial-content:hover {
//   box-shadow: 0 8px 20px rgba(123, 92, 255, 0.3); /* 鼠标悬停时显示更强的阴影 */
// }

.testimonial-content {
  background: #7b5cff;
  padding: 24px 20px;
  border-radius: 15px;
  color: white;
  text-align: left;

  // box-shadow: 0 4px 15px rgba(123, 92, 255, 0.2);
}

.testimonial-text {
  font-size: 1.2rem;
  line-height: 1.5;
  margin-bottom: 20px;
  font-family: NotoSerif-Medium;
}

.testimonial-user {
  display: flex;
  align-items: center;
}

.testimonial-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 12px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-user-info {
  display: flex;
  flex-direction: column;
}

.testimonial-name {
  font-weight: 600;
  font-size: 1rem;
  font-family: NotoSans-SemiBold;
}

.testimonial-role {
  font-size: 0.8rem;
  opacity: 0.8;
  color: #ccc;
}

.carousel-dots {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -30px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  margin: 0 4px;
  // cursor: pointer;
  transition: background 0.3s ease;
}

.dot.active {
  background: #7b5cff;
}
</style>
